<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery添加元素</title>
</head>
<body>
    <!-- ol标签是有序列表标签，li标签是列表项标签 -->
    <ol>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
    </ol>
    <img src="Java.png">
    <button id="remove">删除img元素</button>
    <button id="empty">清空ol下的子元素</button>
    <script src="JS/jquery-3.7.1.min.js"></script>
    <!-- <script>
        // 添加HTML内容
        // 1.语法：$(选择器).append("要添加的内容");表示在元素的末尾添加内容
        // 注意：要添加的内容可以是HTML标签，也可以是文本
        // 2.语法：$(选择器).prepend("要添加的内容");表示在元素的开头添加内容
        // 3.语法：$(选择器).after("要添加的内容");表示在元素的后面添加内容
        // 4.语法：$(选择器).before("要添加的内容");表示在元素的前面添加内容
        $(function(){
            //在ol标签的末尾添加li标签
            $("ol").append("<li>list item 4</li>");
            $("ol").append("<h1>h1标题</h1>");
            //在ol标签的开头添加li标签
            $("ol").prepend("<li>list item 0</li>");
            $("ol").prepend("<h1>h1标题</h1>");
            //在img标签的后面添加一个p标签
            $("img").after("<p>这是一个段落</p>");
            //在img标签的前面添加一个p标签
            $("img").before("<p>这是一个段落</p>");
        })
    </script> -->

    <script>
        // 删除元素
        // 1.语法：$(选择器).remove();表示删除元素
        // 2.语法：$(选择器).empty();表示清空元素的内容
        $(function(){
            //删除img标签
            $("#remove").click(function(){
                $("img").remove();
            })
            //清空ol标签的内容
            $("#empty").click(function(){
                $("ol").empty();
            })
        
        })
    </script>
    
</body>
</html>